<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <style>
        html,body{
            margin: 0;
            padding:0; 
        }
        h1{
            text-align: center;
            width: 200px;
            margin: 20px auto;
        }
        table{
            border-collapse:collapse;
            margin: 20px auto;
        }
        th,td{
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
    <script>
        $(function(){
            var movieData=[];
            var tbody=$("tbody");
            var showList=function(){
                tbody.empty();
                for(var i=0;i<movieData.length;i++){
                    var tr="<tr index="+i+"><td>"+movieData[i].name+"</td><td>"+movieData[i].year+
                    "</td><td>"+"<button class='btn-min'>-</button>"+
                    movieData[i].num+"<button class='btn-add'>+</button>"
                    +"</td><td>"+"<button class='btn-del'>删除</button>"+"</td></tr>";
                    console.log(tr);
                    var jtr=$(tr);
                    jtr.appendTo(tbody);
                    jtr.find(".btn-del").on("click",function(){
                        var btnDel=$(this);
                        var tr=btnDel.parents("tr");
                        var index=tr.attr("index");
                        $.ajax({
                            method:"get",
                            url:"/del",
                            data:{
                                index:index
                            },
                            success:function(data){
                                movieData.splice(index,1);
                                showList();
                            }
                        })
                    })
                    jtr.find(".btn-add").on("click",function(){
                        var btnAdd=$(this);
                        var tr=btnAdd.parents("tr");
                        var index=tr.attr("index");
                        $.ajax({
                            method:"get",
                            url:"/add",
                            data:{
                                index:index
                            },
                            success:function(data){
                                if(movieData[index].num<=4){
                                movieData[index].num=movieData[index].num+1;}
                                showList();
                            }
                        })
                    })
                    jtr.find(".btn-min").on("click",function(){
                        var btnMin=$(this);
                        var tr=btnMin.parents("tr");
                        var index=tr.attr("index");
                        $.ajax({
                            method:"get",
                            url:"/min",
                            data:{
                                index:index
                            },
                            success:function(data){
                                    if(movieData[index].num>0){
                                         movieData[index].num=movieData[index].num-1;
                                    }
                                showList();
                            }
                        })
                    })
                }
            }
            var getMoviesData=function(){
                $.ajax({
                    method:"get",
                    url:"/movies",
                    success:function(data){
                        movieData=data;
                        showList();
                    }
                    
                })
            }
            getMoviesData();
        })
    </script>
</head>
<body>
    <h1>电影的类表</h1>
    <table>
        <thead>
            <tr>
                <th>电影名字</th>
                <th>电影年份</th>
                <th>电影星级</th>
                <th>电影操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>